<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">产品列表</p>
    </div>
    <div class="view-container">
      <input
        v-model="keywords"
        class="form-control"
        type="text"
        placeholder="请输入搜索关键词"
        @keyup="filter()"
      />
      <ul class="options" v-if="isShow">
        <div class="head-e">
          <p class="all-shop">共{{ total }}个产品</p>
          <button class="btn" @click="onAddProduct" v-hasPermi="['system:product:add']">新建产品</button>
          <!-- <button class="btn">批量上传</button>
          <button class="btn">导出数据</button> -->
        </div>
        <li @click="check(item)" v-for="item in productList" :key="item.id">
          <!-- 数据 -->
          {{ item.productName + item.productSpace + item.approveNumber}}
          <!-- 删除数据 -->
          <img src="@/assets/img/Plansearch/delete.png" @click.stop="onDelete(item)" class="icon-images" />
          <!-- 编辑编辑 -->
          <img src="@/assets/img/Plansearch/text.png" @click.stop="onEdit(item)" class="icon-images" />
        </li>
      </ul>
    </div>
    <el-dialog :visible.sync="open" width="700px" append-to-body :title="title" center>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="产品名称:" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入产品名称" />
        </el-form-item>
         <el-form-item label="产品规格:" prop="productSpace">
          <el-input v-model="form.productSpace" placeholder="请输入产品规格" />
        </el-form-item>
         <el-form-item label="外包装量:" prop="packingNum">
          <el-input v-model.number="form.packingNum" placeholder="请输入外包装量" />
        </el-form-item>
        <el-form-item label="外包装单位:" prop="packingUnit">
          <el-input v-model="form.packingUnit" placeholder="请输入外包装单位" />
        </el-form-item>
        <el-form-item label="批准文号:" prop="approveNumber">
          <el-input v-model="form.approveNumber" placeholder="请输入批准文号" />
        </el-form-item>
        <el-form-item label="产品图片:" prop="imgUrl">
          <el-upload
            class="avatar-uploader"
            action="#"
            :auto-upload="false"
            :on-change="onUploadType"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
            :show-file-list="false"
          >
            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="btn-success width150"
          @click="onSubmit()"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProduct, addProduct, editProduct, delProduct } from "@/api/system/product/product"
import { uploadImg } from "@/api/system/upload/upload"
export default {
  name: "planSearch",
  data() {
    return {
      //产品列表数据
      productList: [],
      //遮罩层
      loading:true,
      // 控制下拉列表的显示状态
      isShow: true,
      // 搜索关键词(和表单元素进行绑定)
      keywords: '',
      open: false,
      title: '新建产品',
      // 表单参数
      form: {
        productName: '',
        productSpace: '',
        packingNum: '',
        packingUnit: '',
        approveNumber: '',
        imgUrl: ''
      },
      total: '',
      // 表单校验
      rules: {
        productName: [
          { required: true, message: "产品名称不能为空", trigger: "blur" }
        ],
        productSpace: [
          { required: true, message: "产品规格不能为空", trigger: "blur" }
        ],
        packingNum: [
          { required: true, message: "外包装量不能为空", trigger: "blur" },
          { type: 'number', message: '外包装量必须为数字'}
        ],
        packingUnit: [
          { required: true, message: "外包装单位不能为空", trigger: "blur" }
        ],
        approveNumber: [
          { required: true, message: "批准文号不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created(){
    this.getProduct()
  },
  methods: {
    //请求产品列表
    getProduct(){
     this.loading = true
     listProduct({productName: this.keywords}).then((res) => {
        this.productList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    // 输入框的keyup事件处理函数
    filter() {
      // if(this.keywords == ''){
        this.getProduct()
      // }else{
      //   this.productList = this.common.searchList(this.productList, this.keywords)
      // }
    },
    check(e) {
      // console.log(e)
      this.$router.push({
        path:'add',
        query:{
          productId: e.productId,
          productName: e.productName,
          productSpace: e.productSpace
        }
      })
    },
    // 新建产品
    onAddProduct(){
      this.open = true
      this.title = '新建产品'
      this.form = {
        productName: '',
        productSpace: '',
        packingNum: '',
        packingUnit: '',
        approveNumber: '',
        imgUrl: ''
      }
    },
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.productId != undefined) {
            editProduct(this.form).then((res) => {
              this.$modal.msgSuccess("编辑成功")
              this.open = false
              this.getProduct()
            });
          } else {
            addProduct(this.form).then((res) => {
              this.$modal.msgSuccess("新建成功")
              this.open = false
              this.getProduct()
            })
          }
        }
      })
    },
    // 编辑编辑
    onEdit(e) {
      this.open = true
      this.form = e
      this.title = '编辑产品'
    },
    //删除
    onDelete(e) {
      const id = e.productId
      this.$modal.confirm('是否确认删除当前产品？').then(()=>{
        delProduct(id).then(() => {
          this.getProduct()
          this.$modal.msgSuccess("删除成功")
        })
      }).catch(() => {})
    },
    // 上传产品图片
    onUploadType(item){
      let formData = new FormData()
      let file = item.raw
      formData.append('file', file)
      uploadImg(formData).then(res => {
        this.form.imgUrl = res.data.fileUrl
      })
    },
  }
}
</script>

<style scoped>
.form-control {
  height: 48px;
  padding: 10px;
  width: 100%;
  border: 1px solid #cccccc;
  border-radius: 4px;
  vertical-align: middle;
  outline: none;
}
.options {
  background: #ffffff;
}
.options li {
  height: 48px;
  line-height: 48px;
  cursor: pointer;
  border: 1px solid #cccccc;
  border-top: 0px;
  text-indent: 12px;
}
.options li:hover {
  background: #f3f5f9;
  color: #000;
}
.head-e {
  display: flex;
  align-items: center;
  border: 1px solid #cccccc;
  background: #f3f5f9;
}
.all-shop {
  line-height: 50px;
  flex: 1;
  margin-left: 12px;
}
.icon-images{
  float: right;
  margin-right: 10px;
  margin-top: 15px
}
.btn {
  background: #28c6c6;
  width: 148px;
  height: 35px;
  border: 0px;
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 35px;
  margin-right: 10px;
}
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  color:#606266;
  width: 150px;
  height: 150px;
  margin-bottom: 22px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #5ED4D4;
}
.avatar-uploader:hover .avatar-uploader-icon{
  color: #5ED4D4;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  display: block;
}
</style>
